<template>
	<div id="details">
		<!-- 头部 -->
		<div class="page-header">
			<div class="title">
				<p>{{productDetails.product_name}}</p>
				<div class="list">
					<ul>
						<li>
							<router-link to>概述</router-link>
						</li>
						<li>
							<router-link to>参数</router-link>
						</li>
						<li>
							<router-link to>用户评价</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 头部END-->

		<!-- 主要内容 -->
		<div class="main">
			<!-- 左侧商品轮播图 -->
			<div class="block">
				<!-- 不止一张图片，就用轮播图  仅一张就用div盒子 -->
				<el-carousel height="560px" v-if="productPicture.length>1">
					<el-carousel-item v-for="item in productPicture" :key="item.id">
						<!-- 为什么要用服务器端的这个地址，是怕获取不到数据吗  
							这里获取到的应该不是图片，而是一个文件路径，加上后台的项目地址就ok了，这样还可以避免加载缓慢的问题吗？ 优化？		 -->
						<img style="height:560px;" :src="$target + item.product_picture" :alt="item.intro" />
						<!-- $target + -->
					</el-carousel-item>
				</el-carousel>
				<div v-if="productPicture.length==1">
					<img style="height:560px;" :src="$target + productPicture[0].product_picture"
						:alt="productPicture[0].intro" /> <!-- $target + -->
				</div>
			</div>
			<!-- 左侧商品轮播图END -->

			<!-- 右侧内容区 -->
			<div class="content">
				<h1 class="name">{{productDetails.product_name}}</h1>
				<p class="intro">{{productDetails.product_intro}}</p>
				<p class="store">小米自营</p>
				<div class="price">
					<span>{{productDetails.product_selling_price}}元</span>
					<!-- 标价与售价的样式 -->
					<span v-show="productDetails.product_price != productDetails.product_selling_price"
						class="del">{{productDetails.product_price}}元</span>
				</div>
				<div class="pro-list">
					<span class="pro-name">{{productDetails.product_name}}</span>
					<span class="pro-price">
						<span>{{productDetails.product_selling_price}}元</span>
						<span v-show="productDetails.product_price != productDetails.product_selling_price"
							class="pro-del">{{productDetails.product_price}}元</span>
					</span>
					<p class="price-sum">总计 : {{productDetails.product_selling_price}}元</p>
				</div>
				<!-- 内容区底部按钮 -->
				<div class="button">
					<el-button class="shop-cart" :disabled="dis" @click="addShoppingCart">加入购物车</el-button>
					<el-button class="like" @click="addCollect">喜欢</el-button>
				</div>
				<!-- 内容区底部按钮END -->
				<div class="pro-policy">
					<ul>
						<li>
							<i class="el-icon-circle-check"></i> 小米自营
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 小米发货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天无理由退货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天价格保护
						</li>
					</ul>
				</div>
			</div>
			<!-- 右侧内容区END -->
		</div>
		<!-- 主要内容END -->
	</div>
</template>
<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				dis: false, // 控制“加入购物车按钮是否可用”
				productID: "", // 商品id
				productDetails: "", // 商品详细信息
				productPicture: "" // 商品图片
			};
		},
		/* mounted() {
			console.log('111')  //就执行一次，activated每次进入页面都会执行，只要是由缓存
		}, */
		// 通过路由获取商品id
		//进来后，更新默认的商品id  然后通过监视属性做事  不是一次性的啊？？？  	 
		/* 一般的思路是初始化的时候，在挂载后更新id并向后台发数据，用activated的话，每次进来都会更新商品id，然后发请求，做事情 */
		activated() {
			if (this.$route.query.productID != undefined) {
				this.productID = this.$route.query.productID;
			}
			console.log('activated')
		},
		watch: {
			/* 默认的商品id变化，调用vuex的方法，获取后台数据
				后台设置了两个响应的按钮，一个获取商品的信息，一个获取图片
				初始化的
			 */
			productID: function(val) {
				this.getDetails(val);
				this.getDetailsPicture(val);
			}
		},
		methods: {
			...mapActions(["unshiftShoppingCart", "addShoppingCartNum"]),
			// 获取商品详细信息
			getDetails(val) {
				this.$axios
					.post("/api/product/getDetails", {
						productID: val
					})
					.then(res => {
						//console.log(res,'1')
						this.productDetails = res.data.Product[0];
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 获取商品图片
			getDetailsPicture(val) {
				this.$axios
					.post("/api/product/getDetailsPicture", {
						productID: val
					})
					.then(res => {
						//console.log(res, '2')
						this.productPicture = res.data.ProductPicture;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 加入购物车
			addShoppingCart() {
				// 判断是否登录,没有登录则显示登录组件
				if (!this.$store.getters.getUser) {
					this.$store.dispatch("setShowLogin", true);
					return;
				}
				//登录状态下的操作
				this.$axios
					.post("/api/user/shoppingCart/addShoppingCart", {
						user_id: this.$store.getters.getUser.user_id,
						product_id: this.productID
					})
					.then(res => {
						
						/* Unexpected lexical declaration in case block(no-case-declarations)
						 该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中 */
						//const cartData = {}
						switch (res.data.code) {					
							case "001":
								// 新加入购物车成功
								console.log(res.data.shoppingCartData[0])
								//console.log(res.data.shoppingCartData[0].id) 
								//console.log(res.data.shoppingCartData[0].maxNum)
								//把整个数据都给传递过去啦  按说一般都是只传递商品的id吧。。  作者只是为了限制单个商品的最大购买数量 传递两个参数作为对象给过去就行啦	
								//这里我也明白了，为什么要把商品的基础信息和那个图片的api分开  路径不一样，获取回来的数据也不一样，后台处理过了
								//cartData.id = res.data.shoppingCartData[0].id
								//cartData.maxNum = res.data.shoppingCartData[0].maxNum
								//console.log(cartData)
								//this.unshiftShoppingCart(cartData)  //用花括号包裹，然后传递， 或者直接传递对象都可以 接收参数写好就行
								this.unshiftShoppingCart(res.data.shoppingCartData[0]);
								this.notifySucceed(res.data.msg);
								break;
							case "002":
								// 该商品已经在购物车，数量+1 这里传递的是商品的id
								this.addShoppingCartNum(this.productID);
								this.notifySucceed(res.data.msg);
								break;
							case "003":
								// 商品数量达到限购数量
								this.dis = true;
								this.notifyError(res.data.msg);
								break;
							default:
								this.notifyError(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			addCollect() {
				// 判断是否登录,没有登录则显示登录组件
				if (!this.$store.getters.getUser) {
					this.$store.dispatch("setShowLogin", true);
					return;
				}
				this.$axios
					.post("/api/user/collect/addCollect", {
						user_id: this.$store.getters.getUser.user_id,
						product_id: this.productID
					})
					.then(res => {
						if (res.data.code == "001") {
							// 添加收藏成功						
							this.notifySucceed(res.data.msg);
						} else {
							// 添加收藏失败
							this.notifyError(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			}
		}
	};
</script>
<style>
	/* 头部CSS */
	#details .page-header {
		height: 64px;
		margin-top: -20px;
		z-index: 4;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
		box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
	}

	#details .page-header .title {
		width: 1225px;
		height: 64px;
		line-height: 64px;
		font-size: 18px;
		font-weight: 400;
		color: #212121;
		margin: 0 auto;
	}

	#details .page-header .title p {
		float: left;
	}

	#details .page-header .title .list {
		height: 64px;
		float: right;
	}

	#details .page-header .title .list li {
		float: left;
		margin-left: 20px;
	}

	#details .page-header .title .list li a {
		font-size: 14px;
		color: #616161;
	}

	#details .page-header .title .list li a:hover {
		font-size: 14px;
		color: #ff6700;
	}

	/* 头部CSS END */

	/* 主要内容CSS */
	#details .main {
		width: 1225px;
		height: 560px;
		padding-top: 30px;
		margin: 0 auto;
	}

	#details .main .block {
		float: left;
		width: 560px;
		height: 560px;
	}

	#details .el-carousel .el-carousel__indicator .el-carousel__button {
		background-color: rgba(163, 163, 163, 0.8);
	}

	#details .main .content {
		float: left;
		margin-left: 25px;
		width: 640px;
	}

	#details .main .content .name {
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		font-weight: normal;
		color: #212121;
	}

	#details .main .content .intro {
		color: #b0b0b0;
		padding-top: 10px;
	}

	#details .main .content .store {
		color: #ff6700;
		padding-top: 10px;
	}

	#details .main .content .price {
		display: block;
		font-size: 18px;
		color: #ff6700;
		border-bottom: 1px solid #e0e0e0;
		padding: 25px 0 25px;
	}

	#details .main .content .price .del {
		font-size: 14px;
		margin-left: 10px;
		color: #b0b0b0;
		text-decoration: line-through;
	}

	#details .main .content .pro-list {
		background: #f9f9fa;
		padding: 30px 60px;
		margin: 50px 0 50px;
	}

	#details .main .content .pro-list span {
		line-height: 30px;
		color: #616161;
	}

	#details .main .content .pro-list .pro-price {
		float: right;
	}

	#details .main .content .pro-list .pro-price .pro-del {
		margin-left: 10px;
		text-decoration: line-through;
	}

	#details .main .content .pro-list .price-sum {
		color: #ff6700;
		font-size: 24px;
		padding-top: 20px;
	}

	#details .main .content .button {
		height: 55px;
		margin: 10px 0 20px 0;
	}

	#details .main .content .button .el-button {
		float: left;
		height: 55px;
		font-size: 16px;
		color: #fff;
		border: none;
		text-align: center;
	}

	#details .main .content .button .shop-cart {
		width: 340px;
		background-color: #ff6700;
	}

	#details .main .content .button .shop-cart:hover {
		background-color: #f25807;
	}

	#details .main .content .button .like {
		width: 260px;
		margin-left: 40px;
		background-color: #b0b0b0;
	}

	#details .main .content .button .like:hover {
		background-color: #757575;
	}

	#details .main .content .pro-policy li {
		float: left;
		margin-right: 20px;
		color: #b0b0b0;
	}

	/* 主要内容CSS END */
</style>
